<template>
  <div>
    <Form ref="form" :rules="formValidate" :label-width="90" :model="form">
          <FormItem label="Parent Category">
            <!-- <Input v-model="form.type" /> -->
            <treeselect 
            v-model="parentId" 
            :options="options"
            id="id"
            placeholder="Select parent category"
            />
          </FormItem>
          <FormItem label="Category Name" prop="categoryName">
            <Input v-model="form.categoryName" />
          </FormItem>
          <FormItem label="Order" prop="sort">
            <Input v-model="form.sort"/>
          </FormItem>
    </Form>
    <Row class="code-row-bg" justify="end" type="flex">
      <Button @click="cancel" style="margin-right:10px">Cancel</Button>
      <Button @click="save" type="primary">Save</Button>
    </Row>
  </div>
</template>
<script>
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import { labelApi } from '@/api/label';
  import { toTreeSelectData } from './treeData';
  export default {
    name: 'CodeReviewListForm',
    components: { Treeselect },
    props: {
      //是否为更新表单
      isUpdate: {
        type: Boolean,
        default: true
      },
      //更新的表单数据对象
      updateData: {
        type: Object
      },
      //夫类型列表
      parentList:{
        type: Array,
        default: true
      },
      proId:{
        type: Number,
        default: true
      },
    },
    data() {
      return {
        parentId:null,
        //表单数据
        form: {
          sort:null,
          //排序
          categoryName:null,
        },
        //表单验证
        formValidate: {
          //类型
          //sort:[{ required: true, message: '请输入排序', trigger: 'blur' }],
          //名字
          categoryName:[{ required: true, message: 'Please insert category name', trigger: 'blur' }],
        },
        options:[]
      }
      
    },
  watch: {
      updateData: function(newValue, oldValue) {
          this.$refs['form'].resetFields();
          if (this.isUpdate) {
              for (let k in this.form) {
                  this.$set(this.form, k, newValue[k]);
              }
              this.$set(this.form, 'id', newValue['id']);
          }
          //更新
          if(newValue.parentId){
              this.parentId = newValue.parentId;
          }
      },
      isUpdate: function(newValue, oldValue) {
          if (!newValue) {
              this.resetForm();
              this.$refs['form'].resetFields();
          }
      },
      proId: function(newValue, oldValue) {
          if(!this.isUpdate){
              if(newValue){
                  this.parentId = newValue;
              }
          }
      },
      parentList: function(newValue, oldValue) {
          if(newValue.length){
              this.options = toTreeSelectData(newValue);
          }
          
      },
  },
    created() {},
    mounted() {
    },
    methods: {
      cancel() {
        this.$emit('on-form-close');
      },
      save() {
       this.$refs['form'].validate(valid => {
         if (valid) {
           if (this.isUpdate) {
             this.update();
           } else {
             this.add();
           }
         } else {
          this.$Message.error('参数验证错误，请仔细填写表单数据!');
         }
       });
      },
    resetForm() {
        this.form = {
          sort:null,
          categoryName:null,
        };
        this.$refs['form'].resetFields();
        //清空父类型
        this.parentId = null;
      },
      async add() {
        this.$Spin.show();
        // if(!this.parentId){
        //     this.$Message.error('父类型不能为空');
        //     return;
        // }
        this.form.parentId = this.parentId;
        let res = await labelApi.addType(this.form);
        this.$Message.success(res.msg);
        this.$Spin.hide();
        this.resetForm();
        this.$emit('on-form-close');
      },
      async update() {
        // if(!this.parentId){
        //     this.$Message.error('父类型不能为空');
        //     return;
        // }
        this.form.parentId = this.parentId;
        this.form.id = this.updateData.id;
        this.$Spin.show();
        let res = await labelApi.editType(this.form);
        this.$Message.success(res.msg);
        this.$Spin.hide();
        this.resetForm();
        this.$emit('on-form-close');
      }
    }
  };
</script>